<script setup lang="ts">

</script>

<template>
  <div class="page2">
    <div class="inset-0 flex overflow-hidden">
      <SiderBar/>
      <div class="flex flex-1 w-full min-w-0">
        <div class="flex-col items-stretch relative w-full flex-1 flex">
          <div
              class="h-[--header-height] flex-shrink-0 flex items-center border-b border-gray-200 dark:border-gray-800 px-4 gap-x-4 min-w-0">
            <div class="flex items-center justify-between flex-1 gap-x-1.5 min-w-0">
              <div class="flex items-stretch gap-1.5 min-w-0">
                <button type="button"
                        class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center lg:hidden"
                        aria-label="Open sidebar"><span class="i-heroicons-bars-3-20-solid flex-shrink-0 h-5 w-5"
                                                        aria-hidden="true"></span><!----><!----></button>
                <h1 class="flex items-center gap-1.5 font-semibold text-gray-900 dark:text-white min-w-0"><span
                    class="truncate">Settings</span></h1><!----></div><!----><!----></div>
          </div>
          <div
              class="min-h-[49px] flex-shrink-0 flex items-center border-b border-gray-200 dark:border-gray-800 gap-x-4 py-0 px-1.5 overflow-x-auto">
            <div class="flex items-center justify-between flex-1 gap-x-1.5">
              <nav class="relative w-full flex items-center justify-between">
                <ul class="flex items-center min-w-0">
                  <li class="min-w-0"><a
                      class="group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 text-gray-900 dark:text-white after:bg-primary-500 dark:after:bg-primary-400 after:rounded-full"
                      href="/settings"><!----><span
                      class="i-heroicons-user-circle flex-shrink-0 w-5 h-5 relative text-gray-700 dark:text-gray-200"></span><span
                      class="truncate relative"><span class="sr-only"> Current page: </span> General</span><!----></a>
                  </li>
                  <li class="min-w-0"><a
                      class="group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
                      href="/settings/members"><!----><span
                      class="i-heroicons-user-group flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span><span
                      class="truncate relative"><!----> Members</span><!----></a></li>
                  <li class="min-w-0"><a
                      class="group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
                      href="/settings/notifications"><!----><span
                      class="i-heroicons-bell flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span><span
                      class="truncate relative"><!----> Notifications</span><!----></a></li>
                </ul>
                <ul class="flex items-center min-w-0">
                  <li class="min-w-0"><a
                      class="group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
                      href="https://ui.nuxt.com/pro" rel="noopener noreferrer" target="_blank"><!----><span
                      class="i-heroicons-book-open flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span><span
                      class="truncate relative"><!----> Documentation</span><!----></a></li>
                  <li class="min-w-0"><a
                      class="group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75 before:absolute before:inset-x-0 before:inset-y-2 before:inset-px before:rounded-md hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 after:absolute after:bottom-0 after:inset-x-2.5 after:block after:h-[2px] after:mt-2 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
                      href="https://ui.nuxt.com/pro/purchase" rel="noopener noreferrer" target="_blank"><!----><span
                      class="i-heroicons-credit-card flex-shrink-0 w-5 h-5 relative text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200"></span><span
                      class="truncate relative"><!----> Buy now</span><!----></a></li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="p-4 flex-1 flex flex-col overflow-y-auto pb-24">
            <div class="divide-y divide-gray-200 dark:divide-gray-800 space-y-6 *:pt-6 first:*:pt-2 mb-6">
              <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-start gap-4"><!---->
                  <div><p class="text-gray-900 dark:text-white font-semibold">Theme</p>
                    <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">Customize the look and feel of your
                      dashboard.
                    </div>
                  </div>
                </div>
                <div class="flex flex-wrap items-center gap-1.5">
                  <div class="relative" data-headlessui-state=""><!---->
                    <div id="headlessui-listbox-button-nOV8oKAqCyh_479" aria-haspopup="listbox" aria-expanded="false"
                         data-headlessui-state="" role="button" class="flex items-center w-full">
                      <button
                          class="relative w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 inline-flex items-center text-left cursor-default rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ps-9 pe-9"
                          type="button"><span
                          class="absolute inset-y-0 start-0 flex items-center pointer-events-none px-2.5"><span
                          class="i-heroicons-computer-desktop-20-solid flex-shrink-0 text-gray-400 dark:text-gray-500 h-5 w-5"></span></span><span
                          class="truncate">System</span><span
                          class="absolute inset-y-0 end-0 flex items-center pointer-events-none px-2.5"><span
                          class="i-heroicons-chevron-down-20-solid flex-shrink-0 text-gray-400 dark:text-gray-500 h-5 w-5"
                          aria-hidden="true"></span></span></button>
                    </div><!----></div>
                </div>
              </div>
            </div>
            <div class="flex items-center align-center text-center w-full flex-row mb-4">
              <div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><!----></div>
            <form>
              <div class="divide-y divide-gray-200 dark:divide-gray-800 space-y-6 *:pt-6 first:*:pt-2 mb-6">
                <div class="flex flex-wrap items-center justify-between gap-4">
                  <div class="flex items-start gap-4"><!---->
                    <div><p class="text-gray-900 dark:text-white font-semibold">Profile</p>
                      <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">This information will be displayed
                        publicly so be careful what you share.
                      </div>
                    </div>
                  </div>
                  <div class="flex flex-wrap items-center gap-1.5">
                    <button type="submit"
                            class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center">
                      <!----><span class="">Save changes</span><!----></button>
                  </div>
                </div>
                <div class="grid grid-cols-2 gap-2 items-center">
                  <div class="">
                    <div class="flex content-center items-center justify-between text-sm"><label for="nXkde5j5GJc_481"
                                                                                                 class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Name</label>
                      <!----></div>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">Will appear on receipts, invoices, and other
                      communication.</p></div>
                  <div class="">
                    <div class="relative"><input id="nXkde5j5GJc_481" name="name" type="text"
                                                 class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ps-10"
                                                 autocomplete="off"><span
                        class="absolute inset-y-0 start-0 flex items-center pointer-events-none px-3"><span
                        class="i-heroicons-user flex-shrink-0 text-gray-400 dark:text-gray-500 h-5 w-5"></span></span>
                      <!----></div><!----></div>
                </div>
                <div class="grid grid-cols-2 gap-2">
                  <div class="">
                    <div class="flex content-center items-center justify-between text-sm"><label for="nXkde5j5GJc_482"
                                                                                                 class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Email</label>
                      <!----></div>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">Used to sign in, for email receipts and product
                      updates.</p></div>
                  <div class="">
                    <div class="relative"><input id="nXkde5j5GJc_482" name="email" type="email"
                                                 class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ps-10"
                                                 autocomplete="off"><span
                        class="absolute inset-y-0 start-0 flex items-center pointer-events-none px-3"><span
                        class="i-heroicons-envelope flex-shrink-0 text-gray-400 dark:text-gray-500 h-5 w-5"></span></span>
                      <!----></div><!----></div>
                </div>
                <div class="grid grid-cols-2 gap-2">
                  <div class="">
                    <div class="flex content-center items-center justify-between text-sm"><label for="nXkde5j5GJc_483"
                                                                                                 class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Username</label>
                      <!----></div>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">Your unique username for logging in and your
                      profile URL.</p></div>
                  <div class="">
                    <div class="relative"><input id="nXkde5j5GJc_483" name="username" type="username"
                                                 class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 ps-[77px]"
                                                 autocomplete="off"><span
                        class="absolute inset-y-0 start-0 flex items-center pointer-events-none px-3"><span
                        class="text-gray-500 dark:text-gray-400 text-sm">nuxt.com/</span></span><!----></div><!---->
                  </div>
                </div>
                <div class="grid grid-cols-2 gap-2">
                  <div class="">
                    <div class="flex content-center items-center justify-between text-sm"><label for="nXkde5j5GJc_484"
                                                                                                 class="block font-medium text-gray-700 dark:text-gray-200">Avatar</label>
                      <!----></div><!----></div>
                  <div class="mt-1 relative flex flex-wrap items-center gap-3"><span
                      class="relative inline-flex items-center justify-center flex-shrink-0 bg-gray-100 dark:bg-gray-800 rounded-full h-12 w-12 text-lg"><span
                      class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span><!----></span>
                    <button type="button"
                            class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 px-3 py-2 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center">
                      <!----><span class="">Choose</span><!----></button>
                    <input type="file" class="hidden" accept=".jpg, .jpeg, .png, .gif">
                    <p class="text-gray-500 dark:text-gray-400 mt-0 text-sm">JPG, GIF or PNG. 1MB Max.</p></div>
                </div>
                <div class="grid grid-cols-2 gap-2">
                  <div class="">
                    <div class="flex content-center items-center justify-between text-sm"><label for="nXkde5j5GJc_485"
                                                                                                 class="block font-medium text-gray-700 dark:text-gray-200">Bio</label>
                      <!----></div>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">Brief description for your profile. URLs are
                      hyperlinked.</p></div>
                  <div class="">
                    <div class="relative"><textarea id="nXkde5j5GJc_485" name="bio" rows="5"
                                                    class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-textarea rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 resize-none"></textarea>
                    </div><!----></div>
                </div>
                <div class="grid grid-cols-2 gap-2">
                  <div class="">
                    <div class="flex content-center items-center justify-between text-sm"><label for="password_new"
                                                                                                 class="block font-medium text-gray-700 dark:text-gray-200">Password</label>
                      <!----></div>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">Confirm your current password before setting a
                      new
                      one.</p></div>
                  <div class="">
                    <div class="relative"><input id="password" name="password" type="password"
                                                 placeholder="Current password"
                                                 class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
                      <!----><!----></div>
                    <div class="relative mt-2"><input id="password_new" name="password" type="password"
                                                      placeholder="New password"
                                                      class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm px-3 py-2 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
                      <!----><!----></div><!----></div>
                </div>
              </div>
            </form>
            <div class="flex items-center align-center text-center w-full flex-row mb-4">
              <div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><!----></div>
            <div class="divide-y divide-gray-200 dark:divide-gray-800 space-y-6 *:pt-6 first:*:pt-2 mb-6">
              <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-start gap-4"><!---->
                  <div><p class="text-gray-900 dark:text-white font-semibold">Account</p>
                    <div class="mt-1 text-sm text-gray-500 dark:text-gray-400">No longer want to use our service? You
                      can
                      delete your account here. This action is not reversible. All information related to this account
                      will be deleted permanently.
                    </div>
                  </div>
                </div><!----></div>
              <div>
                <button type="button"
                        class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 px-3 py-2 shadow-sm text-white dark:text-gray-900 bg-red-500 hover:bg-red-600 disabled:bg-red-500 dark:bg-red-400 dark:hover:bg-red-500 dark:disabled:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 inline-flex items-center">
                  <!----><span class="">Delete account</span><!----></button>
              </div>
            </div><!----></div><!----></div><!----></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.page {
  margin: 0 auto;
  width: 100vw !important;
  max-width: 80rem !important;
}
</style>